<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="icon" href="img/tyust.png"/>
		<title>登陆页面</title>
		<style>
			body{
				background-color: #6666FF;/* 主题背景颜色 */
			}
			.InitialPage{/* 外面的整个的div */
				width: 400px;
				height:330px;
				background-color: white;/* div背景的颜色 */
				/*让div整体居中*/
				margin: 0 auto;
				/*让div顶部外边距是130px，让整个div离顶部远一些*/
				margin-top:130px;
				/*调整顶部内边距*/
				padding-top:20px;/* 为了让logo离div的边框有一定距离 */
				text-align: center;/* 所有div中的内容都居中 */
			}
			.IconNi{/* 用户和密码锁的logo的大小调整 */
				width: 15px;
				height: 15px;
			}
			.loginInput{/* 文本输入框的调整 */
				width: 226px;
				height: 25px;
				border-radius: 5px;/* 让边框有一定弧度 border：边框  */
				border:1px solid darkgray;/* solid:实线 darkgray 颜色*/
				margin-bottom: 10px;/* 底部外边距:为了让两个文本框之间有间隔 */
				padding-left:30px;/* 左侧内边距:让输入的文本离文本框的左边的边框有一定距离 */
				/*文本框背景透明*/
				background-color: transparent;
				margin-left:-20px;/* 左侧外边距:让边框整体移动,可以方便logo放进来 */
			}
			.loginBtn{/* 登录按钮的设置 */
				width: 253px;
				height: 35px;
				background-color: #FF6B4D;
				color:white;
				font-size: 20px;
				border-radius: 5px;
				/*去掉边框*/
				border:none;
			}
			.thirdLogin{/* 对放置logo的div位置设置 */
				margin-top:10px;
				margin-bottom: 5px;
			}
			.Link{
				text-decoration:none;/* 消除不知道咋来的小黑点 */
			}
			.logpic{/* 三个logo的大小设置和之间的间隔 */
				width: 35px;
				height: 35px;
				margin-left: 10px;
			}
		</style>
	</head>
	<body>
		<div class="InitialPage"><!-- 顶级套娃：div中再来div -->
			<div style="text-align: center;">
				<img src="img/tyustlogo.png" width="150px"/>
			</div>
			<h4>毕业实习教务系统</h4>
			<div>
				<img class="IconNi" src="img/user.png"><input class="loginInput" type="text" placeholder="请输入用户名">
				<br>
				<img class="IconNi" src="img/password.png"><input class="loginInput" placeholder="密码" type="password"/>
				<br>
				<form action="https://www.tyust.edu.cn/">
					<input class="loginBtn" type="submit" value="登录"><!-- 提交表单 -->
				</form>
			</div>
			<!-- 这个div放第三方登录 -->
			<div class="thirdLogin">
				<a class="Link" href="https://im.qq.com/index"><!-- 超链接 -->
					<img class="logpic" src="img/qq.png">
				</a>
				<a class="Link" href="https://wx.qq.com/">
					<img class="logpic" src="img/weixin.png"/>
				</a>
				<a class="Link" href="https://weibo.com/overseas">
					<img class="logpic" src="img/weibo.png">
				</a>
			</div>
			<div style="font-size:12px;line-height: 20px;"><!-- line-height：行间距 -->
				技术支持：太原科技大学
				<br>
				开发者:wbh
			</div>
		</div>
	</body>
</html>